<template>
  <div class="queue-config-node-form">
    <h4> {{ title }} </h4>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="队列名称:" prop="queueName">
        <el-input v-model="form.queueName" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="队列路由:" prop="queueRouting">
        <el-input v-model="form.queueRouting" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="队列备注:" prop="queueRemark">
        <el-input v-model="form.queueRemark" type="textarea" clearable />
      </el-form-item>

      <el-form-item label-width="0">
        <el-button size="small" @click="cancelForm">取消</el-button>
        <el-button size="small" type="primary" @click="submitForm('form')">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    requestSystemId: {
      type: String,
      default: ''
    },

    title: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      form: {
        queueName: '', // 队列名称
        queueRouting: '', // 队列路由
        queueRemark: '' // 队列备注
      },
      rules: {
        queueName: { required: true, message: '请输入队列名称', trigger: 'blur' },
        queueRouting: { required: true, message: '请输入队列路由', trigger: 'blur' },
        queueRemark: { required: true, message: '请输入队列备注', trigger: 'blur' }
      }
    }
  },

  created () {
  },

  methods: {
    // 初始化form
    initForm (data) {
      this.form = {
        queueName: data ? data.queueName : '',
        queueRouting: data ? data.queueRouting : '',
        queueRemark: data ? data.queueRemark : ''
      }
    },

    // 确定
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('nodeForm', this.form)
        }
      })
    },
    // 取消
    cancelForm () {
      this.$emit('nodeForm', {})
    }
  }
}
</script>
